<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>000</title>
        <style>
            html, body, ul {
                margin: 0;
                padding: 0;
            }
            ul {
                width:985px;
                margin:100px auto;
                font-size:0;
                list-style-type:none;
            }
            li {
                display:inline-block;
                width:122px;
                height:172px;
                text-align:center;
                margin-right:0.8px;
                position:relative;
                overflow:hidden;
                
            }
            li div {
                position:absolute;
                left:0;
                left:0;
            }
            img {
                border:0;
                width:122px;
                height:172px;
            }
        </style>
        <script src="doMove.js"></script>
        <script>
            window.onload = function () {
                var oUl = document.getElementsByTagName("ul")[0];
                var aLi = document.getElementsByTagName("li");
                
                function time() {
                
                    function change(n) {
                        if(n<10) {
                            return "0"+n;
                        }else {
                            return ""+n;
                        }
                    }
                    
                    var nowTime = new Date();
                    var nHour = nowTime.getHours();
                    var nMin = nowTime.getMinutes();
                    var nSec = nowTime.getSeconds();
                    var str = change(nHour) + ":" + change(nMin) + ":" + change(nSec);
                    
                    function flip(li,index) {
                        var oDiv = li.getElementsByTagName("div")[0];
                        var aImg = li.getElementsByTagName("img");
                        if( str.charAt(index) == ":" ) {
                            aImg[0].src = "img/colon.jpg";
                            setTimeout( function () {
                                aImg[0].src = "img/colon2.jpg";
                            },500 )
                        }else {
                            aImg[1].src = "img/"+ str.charAt(index) +".jpg";
                            if( aImg[0].src != aImg[1].src ) {
                                doMove( oDiv,"top",20,-172,function () {
                                    aImg[0].src = aImg[1].src;
                                    oDiv.style.top = 0 + "px";
                                } )
                            }
                        }
                    }
                    
                    for(var i=0; i<aLi.length; i++) {
                        flip( aLi[i],i );
                    }
                }
                time();
                setInterval( time,1000 );
            }
        </script>
    </head>
    <body>
        <ul>
            <li>
                <div>
                    <img src="img/0.jpg"/>
                    <img src="img/0.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/0.jpg"/>
                    <img src="img/0.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/colon.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/0.jpg"/>
                    <img src="img/0.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/0.jpg"/>
                    <img src="img/0.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/colon.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/0.jpg"/>
                    <img src="img/0.jpg"/>
                </div>
            </li>
            <li>
                <div>
                    <img src="img/0.jpg"/>
                    <img src="img/0.jpg"/>
                </div>
            </li>
        </ul>
        
    </body>
</html>



























































